<%--
  Created by IntelliJ IDEA.
  User: kangx
  Date: 2020/8/11
  Time: 10:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>增加用户</title>
    <link rel="stylesheet" href="${AppPath}/css/font.css">
    <link rel="stylesheet" href="${AppPath}/css/index.css">
    <script src="${AppPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${AppPath}/js/index.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" lay-fiter="userForm">

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" lay-fiter="name" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>电话
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone" required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                    <input type="hidden" name="empId" id="empId">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item" id="deptDiv">
                <label for="dept" class="layui-form-label">
                    <span class="x-red">*</span>院系
                </label>
                <div class="layui-input-inline">
                    <select name="deptId" lay-verify="required" lay-filter="dept" id="dept">
                        <option value="">请选择院系</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item" id="majorDiv">
                <label for="major" class="layui-form-label">
                    <span class="x-red">*</span>专业
                </label>
                <div class="layui-input-inline">
                    <select name="majorId" lay-verify="required" lay-filter="major" id="major">
                        <option value="">请选择专业</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item" id="classDiv">
                <label for="class" class="layui-form-label">
                    <span class="x-red">*</span>班级
                </label>
                <div class="layui-input-inline">
                    <select name="classId" lay-verify="required" lay-filter="class" id="class">
                        <option value="">请选择班级</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-mid layui-word-aux">
                <span class="x-red"></span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <input type="hidden" name="userStatus" id="userStatus">
                <button  class="layui-btn" lay-filter="update" lay-submit="">
                    增加
                </button>
            </div>
        </form>
    </div>
</div>
<script>



    //这样就把主窗体的值放到iframe层的隐藏控件了
    //你也可以直接拿到obj完成你的需求
    // alert(JSON.stringify(obj))
    layui.use('form',function(){
        var form = layui.form;
        judgeStatus();
        layui.$("#userStatus").val(${userStatus});
        function judgeStatus() {
            if (${userStatus==1}){
                layui.$("#classDiv").remove();
                layui.$("#majorDiv").remove();
                // layui.$("#classDiv").prop("style","display:none");
                // layui.$("#majorDiv").prop("style","display:none");
            }else if (${userStatus==3}){
                layui.$("#deptDiv").remove();
                layui.$("#classDiv").remove();
                layui.$("#majorDiv").remove();
            }
        }

        // 将院系导入下拉菜单
        layui.$.ajax({
            url:"${AppPath}/dept/findAll",
            type:"post",
            success:function(resp){
                layui.$.each(resp,function (index,dept) {
                    var str='<option value="'+dept.deptId+'">'+dept.deptName+'</option>';
                    layui.$("#dept").append(str)
                })
                form.render();
            }
        })

        //院系下拉菜单选中回调
        form.on('select(dept)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            // 请求专业信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/major/selectByExample",
                type:"post",
                data:{"deptId":data.value,"pageSize":99999},
                success:function(resp){
                    var data=resp.pageInfo.list;
                    var str='<option value="">请选择专业</option>';
                    layui.$.each(data,function (index,major) {
                        str+='<option value="'+major.majorId+'">'+major.majorName+'</option>';
                    })
                    layui.$("#major").html(str)
                    form.render();
                }
            })

        });

        //专业下拉菜单选中回调
        form.on('select(major)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象

            // 请求班级信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/class/selectByExample",
                type:"post",
                data:{"majorId":data.value,"pageSize":99999},
                success:function(resp){
                    var data=resp.classList;
                    var str='<option value="">请选择班级</option>';
                    layui.$.each(data,function (index,clazz) {
                        str+='<option value="'+clazz.classId+'">'+clazz.className+'</option>';
                    })
                    layui.$("#class").html(str)
                    form.render();
                }
            })
        });


        // 监听提交按钮
        form.on('submit(update)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // alert(JSON.stringify(data.field))
            layui.$.ajax({
                url:"${AppPath}/user/add",
                data:data.field,
                type:"post",
                success:function (resp) {
                    // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    if (resp=='ok'){
                        layer.msg('添加成功！',{
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        },function(){
                             parent.location.reload();
                        });
                    }else{
                        layer.msg('请稍后再试！', {
                            icon: 2,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        });
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });


</script>
</body>
</html>